<template>
	<view class="content">
		<homeHeader></homeHeader>
		<swiper @change="changeSwiper" indicator-dots="true" indicator-color="#0ff" indicator-active-color="#fff"
			autoplay="true" class="swiperBanner">
			<swiper-item>
				<image class="swiperImage"
					src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978394783.jpg" />
			</swiper-item>
			<swiper-item>
				<image class="swiperImage"
					src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395241.jpg" />
			</swiper-item>
			<swiper-item>
				<image class="swiperImage"
					src="https://x.dscmall.cn/storage/data/gallery_album/177/original_img/177_P_1597978395260.jpg" />
			</swiper-item>
		</swiper>
		<!-- 列表组件 -->
	
		<homeList :goodsListDatas="goodsListDatas"></homeList>
	</view>
	</view>
</template>

<script>
	import homeHeader from '@/components/home-header/home-header.vue';
	import homeList from '@/components/home-list/home-list.vue';
	import {
		HomeListApi
	} from '@/api/home';
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				type: 'is_best',
				goodsListDatas: []
			}
		},
		onLoad() {
			this.getListDatas()
		},
		methods: {
			changeSwiper(e) {
				console.log(e);
				console.log(e.detail.current);

			},
			// 获取后台list数据
			getListDatas() {
				// 发起请求
				HomeListApi({
					page: this.page,
					size: this.size,
					type: this.type
				}).then(res => {
					console.log(res);
					// 设置到data中
					this.goodsListDatas = res.data
				})
			},
		},
		components: {
			homeHeader,
			homeList
		}
	}
</script>

<style>
	.content{
		background-color: #f4f4f4;
	}
	.swiperBanner {
		width: 710rpx;
		height: 240rpx;
		border-radius: 20rpx;
		overflow: hidden;
		margin: 0rpx auto;
	}

	.swiperBanner .swiperImage {
		width: 100%;
		height: 100%;
	}
</style>
